<template>
  <div>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router>
      <el-menu-item index="/front/home">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="/front/fix">故障报修</el-menu-item>
        <el-menu-item index="/front/complaint">意见反馈</el-menu-item>
        <el-menu-item index="/front/helpold">爱心关怀</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">其他</template>
          <el-menu-item index="2-4-1">客服</el-menu-item>
          <el-menu-item index="2-4-2">工具</el-menu-item>
          <el-menu-item index="2-4-3">设置</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="/front/forum">消息中心</el-menu-item>
      <el-submenu index="4">
        <template slot="title">社区中心</template>
        <el-menu-item index="/front/carport">社区车位</el-menu-item>
        <el-menu-item index="/front/service">同城服务</el-menu-item>
      </el-submenu>
      <el-menu-item index="/front/map">社区位置</el-menu-item>
      <el-row type="flex" class="row-align-center">
        <el-col :span="24">
          <h1 class="text-center" style="margin-top: 9px">欢迎使用智慧社区系统</h1>
        </el-col>
        <div style="margin-right: 20px">
          <el-dropdown style="width: 100px; cursor: pointer">
            <div>
              <img src="../../img/2.jpg" style="width: 30px;height: 30px;border-radius: 50%;position: relative;top: 10px;right: 5px">
              <span style="color: rgba(255,153,0,0.9)">{{user.username}}<i class="el-icon-s-custom" style="margin-left: 5px"></i></span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/front/person" style="text-decoration: none" >个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <span style="text-decoration: none" @click="loginout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
    </el-menu>
    <el-carousel :interval="2000" type="card" height="250px">
      <el-carousel-item v-for="item in imageList" :key="item.id" >
        <img :src="item.idView" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    <div style="width: 1200px;margin: 0 auto">
    <router-view></router-view>

    </div>
  </div>
</template>

<script>
export default {
  name: "Front",
  data() {
    return {
      activeIndex2: '1',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : "登录",
      imageList: [
        {id:0,idView:require("../../img/1.jpg")},
        {id:1,idView:require("../../img/2.jpg")},
        {id:2,idView:require("../../img/3.jpg")},
        {id:3,idView:require("../../img/4.jpg")},
        {id:4,idView:require("../../img/5.jpg")},
        {id:5,idView:require("../../img/6.jpg")},
      ]

    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loginout() {
      this.$router.push("/login")
      localStorage.removeItem("user")
      this.$message.success("退出成功!")
    }
  }
}
</script>

<style scoped>
row-align-center {
  height: 100vh; /* 设置高度为视窗高度，使内容垂直居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.text-center {
  text-align: center; /* 文字水平居中 */
}
</style>